<!-- 
    Document   : index
    Created on : 27-aug-2008, 8:35:06
    Author     : jeroen
    Thanks to: Geert Vandamme, http://luke.breuer.com/tutorial/js_contextmenu.htm, http://elouai.com/javascript-drag-and-drop.php, https://www.squarefree.com/bookmarklets/webdevel.html
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <title>Welcome to Picaroo, the program to organize and print your pictures</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <style type="text/css">
.visible {
display: block;
}

.hidden 
{
    display: none;
}

.example {
  font-size: 0.9em;
  color: blue;
  font-weight: bold;
  text-align: left;
}
        @media print {
    #right {
      display: none !important;
    }
    #paging {
     display: none !important;
   }
}
 #getChoice {
  display:block;
}
  #right {
  position: fixed;
  right: 5px;
  top: 5px;
  border-style: groove;
  border-width: 0 0 4px 4px;
  border-color: blue;
}

#paging {
  display:none;
}

#pagingUl li {
    float: left;
}

#right ul {
   list-style: none;
}        

#right a {
    font-size: 10px;
   font-weight: bold;
   color: black;
   text-decoration: none;
    display: block;
}            
#right a:hover {
    color: #FF9933;
    font-weight: bolder;
}        

#right ul li a {
    padding: 0.5em;
}        

#divContext {
  border: 1px solid blue;
  display: none;
  position: absolute;
}        

#divResize {
   border: 1px dashed blue;
   display: none;
   background-color: silver;
}        

#divProperties {
   display: none;
   border: 1px dashed blue;
   background-color: silver;
}

#divProperties table tr td{
    border: 1px dashed #669999;
    border-left: 0;
    border-right: 0;
}        

#divEditThisCSS {
    display: none;
}

#divComment {
    display: none;
    border: 1px dashed blue;
    background-color: silver;
}        

#divCommentColours {
    display: none;
    border: 1px dashed blue;
    background-color: white;}        

#divCommentColours table {
    border: 1px solid black;
}        

#divCommentColours td {
    width: 50px;
    height: 50px;
}


#pRemoveTheme {
         display: none;
}

#main {
    float: left;
}                

.dynImage {
   border: 1px solid black;
}        

.cmenu {
   margin: 0;
   padding: 0.3em;
   list-style-type: none;
   background-color: white;
   color: black;
}        

.cmenu li:hover {}        

.cmenu hr {
   border: 0;
   border-bottom: 1px solid grey;
   margin: 3px 0px 3px 0px;
   width: 10em;
}        

.cmenu a {
   border: 0 !important;
}        

.cmenu a:hover {
   text-decoration: underline !important;
}        

.cmenu .topSep {
  font-size: 90%;
  border-top: 1px solid gray;
  margin-top: 0.3em;
  padding-top: 0.3em;
}        

.dragme {
 position:relative;
}        


.bookmarklet {
    background-color: silver;
    border: 1px solid black;
}

.bookmarklet a:hover {
    color: green !important;
}

 * html body{
  overflow: hidden;
}        

 * html #main {
  overflow: auto;
  height: 100%;
}        

 * html #right {
   overflow: auto;
   position: absolute;
}

</style>
  <link href="" type="text/css" rel="stylesheet">
 </head>
 
 <body onload="InitContext()">
      <div id="main">
        
       </div>
    
    <div id="right">
    
    </div>
    
    <div id="divContext">
            <ul class="cmenu">
                <li><a id="resize" onclick="resize()">Resize the image</a></li>
                <li><a id="comment" onclick="addComment()">Add a comment</a></li>
                <li><a id="delete" onclick="removeImage()">Delete Image</a></li>
                <li><a id="properties" onclick="view('divProperties')">View &amp; edit properties of the image</a></li>
                <li><a id="cancel" onclick="CloseContext()">Cancel</a></li>
            </ul>
            
            <div id="divResize">
                <table>
                    <tr>
                        <td id="textWidth">width: </td> <td><input id="valueWidth" onchange="resizer('iw','valueWidth')" type="text"></td> <td id="buttonsWidth"><input value="-" onclick='resizer("rw","valueWidth")' type="button"><input value="+" onclick='resizer("ew","valueWidth")' type="button"></td>
                    </tr>
                    <tr>
                        <td>Keep w/h ratio?</td> <td><form action=""><input id="checkboxResize" onchange="controlWidthHeightRatio()" checked="checked" type="checkbox"></form></td>
                    </tr>
                    <tr>
                        <td id="textHeight">height: </td> <td><input id="valueHeight" onchange="resizer('ih','valueHeight')" type="text"></td> <td id="buttonsHeight"><input value="-" onclick='resizer("rh","valueHeight")' type="button"><input value="+" onclick='resizer("eh","valueHeight")' type="button"></td>
                    </tr>
                    <tr>
                        <td><a href="#" onclick="originalSize()">Return to original size</a></td>
                    </tr>
                    <tr>
                        <td><a href="#" onclick="closeDiv('divResize')">Close</a></td>
                    </tr>
                </table>
            </div>
            
            <div id="divComment">
                    <textarea cols="50" rows="10" class="commentBox" onkeyup="submitComment(event)" ></textarea>
                    <a href="#" onclick="view('divCommentColours')">Choose Textcolour</a>
                    <a href="#" onclick="closeDiv('divComment')">Close Comment</a>
                <div id ="divCommentColours">
                    <table>
                        <tr>
                            <td id="red" onclick="textColour('red')" title="red"></td> <td id="blue" onclick="textColour('blue')" title="blue" ></td> <td id="yellow" onclick="textColour('yellow')" title="yellow"></td> <td id="black" onclick="textColour('black')" title="black"></td>
                        </tr>
                        <tr>
                            <td id="green" onclick="textColour('green')" title="green"></td> <td id="silver" onclick="textColour('silver')" title="silver"></td> <td id="orange" onclick="textColour('orange')" title="orange"></td> <td id="white" onclick="textColour('white')" title="white"></td>
                        </tr>
                    </table>
                    <a href="#" onclick="closeDiv('divCommentColours')">Close</a>
                </div>
            </div>
            
            <div id="divProperties">
                <p>Properties of the image</p>
                    <table>
                        <tr><td>Url of the image:</td><td id="urlImage"></td>
                        <tr><td>Alt of the image:</td><td id="altImage"></td>
                        <tr><td>Width of the image:</td><td><input type="text" id="widthImage" onchange="resizer('iw','widthImage')"/></td>
                        <tr><td>Height of the image:</td><td><input type="text" id="heightImage" onchange="resizer('ih','heightImage')"/></td>
                        <tr><td>Border of the image:</td><td><input type="text" id="borderImage" onchange="changeBorderImage('borderImage')"/></td><td class="example">e.g.:2px solid red</td></tr>
                        <tr><td>Top:</td><td><input type="text" id="topImage" onchange="changeTopImage('topImage')"/></td><td class="example">e.g.:400px</td></tr>
                        <tr><td>Left:</td><td><input type="text" id="leftImage" onchange="changeLeftImage('leftImage')"/></td><td class="example">e.g.:400px</td></tr>
                        <tr><td><a href="#" onclick="closeDiv('divProperties')">Close Properties</a></td>
                    </table>    
            </div>
    </div>

    
    
    <div id="paging">
            <ul id="pagingUl">
                <li style="display: none;" id="previous"><a href="#" onclick="setContent('-')">previous</a></li>
                <li style="display: none;" id="next"><a href="#" onclick="setContent('+')">next</a></li>
                <li><a href="#" onclick="addImage()">add image(s)</a></li>
                <li><a href="#" onclick="closePaging()">Close</a></li>
                <li><a href="#" onclick="save(false,false)">Save</a></li>
            </ul>
    </div>
    
    <div style="display: none;">
        <select id="cssSelect" onchange="changeCSSTheme()">
            <option>Choose your theme</option>
            <option value="original">Original theme</option>
            <option value="love.css">Love theme</option>
            <option value="party.css">Party theme</option>
            <option value="black_white.css">Black&amp;White theme</option>
        </select>
    </div>
  
  <script type="text/javascript">
    var originalCSS = ".visible {\n\
display: block;\n\
}\n\
\n\
.hidden \n\
{\n\
    display: none;\n\
}\n\
\n\
.example {\n\
  font-size: 0.9em;\n\
  color: blue;\n\
  font-weight: bold;\n\
  text-align: left;\n\
}\n\
        @media print {\n\
    #right {\n\
      display: none !important;\n\
    }\n\
    #paging {\n\
     display: none !important;\n\
   }\n\
}\n\
 #getChoice {\n\
  display:block;\n\
}\n\
  #right {\n\
  position: fixed;\n\
  right: 5px;\n\
  top: 5px;\n\
  border-style: groove;\n\
  border-width: 0 0 4px 4px;\n\
  border-color: blue;\n\
}\n\
#paging {\n\
  display:none;\n\
}            \n\
\n\
#pagingUl li {\n\
    float: left;\n\
}\n\
\n\
#right ul {\n\
   list-style: none;\n\
}        \n\
\n\
#right a {\n\
    font-size: 10px;\n\
   font-weight: bold;\n\
   color: black;\n\
   text-decoration: none;\n\
    display: block;\n\
}            \n\
#right a:hover {\n\
    color: #FF9933;\n\
    font-weight: bolder;\n\
}        \n\
\n\
#right ul li a {\n\
    padding: 0.5em;\n\
}        \n\
\n\
#divContext {\n\
  border: 1px solid blue;\n\
  display: none;\n\
  position: absolute;\n\
}        \n\
\n\
#divResize {\n\
   border: 1px dashed blue;\n\
   display: none;\n\
   background-color: silver;\n\
}        \n\
\n\
#divProperties {\n\
   display: none;\n\
   border: 1px dashed blue;\n\
   background-color: silver;\n\
}        \n\
\n\
#divProperties table tr td{\n\
    border: 1px dashed #669999;\n\
    border-left: 0;\n\
    border-right: 0;\n\
}        \n\
\n\
#divEditThisCSS {\n\
    display: none;\n\
}\n\
\n\
#divComment {\n\
    display: none;\n\
    border: 1px dashed blue;\n\
    background-color: silver;\n\
}        \n\
\n\
#divCommentColours {\n\
    display: none;\n\
    border: 1px dashed blue;\n\
    background-color: white;}        \n\
\n\
#divCommentColours table {\n\
    border: 1px solid black;\n\
}        \n\
\n\
#divCommentColours td {\n\
    width: 50px;\n\
    height: 50px;\n\
}\n\
\n\
\n\
#pRemoveTheme {\n\
         display: none;\n\
}\n\
\n\
#main {\n\
    float: left;\n\
}                \n\
\n\
.dynImage {\n\
   border: 1px solid black;\n\
}        \n\
\n\
.cmenu {\n\
   margin: 0;\n\
   padding: 0.3em;\n\
   list-style-type: none;\n\
   background-color: white;\n\
   color: black;\n\
}        \n\
\n\
.cmenu li:hover {}        \n\
\n\
.cmenu hr {\n\
   border: 0;\n\
   border-bottom: 1px solid grey;\n\
   margin: 3px 0px 3px 0px;\n\
   width: 10em;\n\
}        \n\
\n\
.cmenu a {\n\
   border: 0 !important;\n\
}        \n\
\n\
.cmenu a:hover {\n\
   text-decoration: underline !important;\n\
}        \n\
\n\
.cmenu .topSep {\n\
  font-size: 90%;\n\
  border-top: 1px solid gray;\n\
  margin-top: 0.3em;\n\
  padding-top: 0.3em;\n\
}        \n\
\n\
.dragme {\n\
 position:relative;\n\
}        \n\
\n\
\n\
.bookmarklet {\n\
    background-color: silver;\n\
    border: 1px solid black;\n\
}\n\
\n\
.bookmarklet a:hover {\n\
    color: green !important;\n\
}\n\
\n\
 * html body{\n\
  overflow: hidden;\n\
}        \n\
\n\
 * html #main {\n\
  overflow: auto;\n\
  height: 100%;\n\
}        \n\
\n\
 * html #right {\n\
   overflow: auto;\n\
   position: absolute;\n\
}";
    
    var rootDir="";
    var themeArray = ['','black_white.css','love.css','party.css'];
    
    var widthRight = 200;
    var widthMain = window.screen.width - (widthRight + 30);
    var target = "";

    var imageList =new Array();
    var numberImages = 3;
    var index = 0;
    var inputPathImages = "<input onfocus='new Function($(\"pathImages\").value=\"\")' type='text' maxlength='99999999999999' id='pathImages' onsubmit='loadImages(\"pathImages\")' value='path to the files' />";
    
    
    var hrefer = navigator.appName.toLowerCase()=='netscape'?"javascript:(function(){var x,d,i,v,st;x=open();d=x.document;d.open();function $(){return window.document.getElementsByTagName(%27img%27);}function h(s){s=s.replace(/&/g,%22&amp;%22);return s;}d.write(%22<style>td{vertical-align:top;white-space:pre;} table,td,th {border: 1px solid #ccc;}</style><table border=1>%22);var i=0;var L=$().length;for(i;i<L;i++){d.write(%22<tr><td>%22+h($()[i].src)+%22</td><td>alt=%22 +h($()[i].alt)+%22;:</td></tr>%22);}d.write(%22</table>%22);d.close();})();":"javascript:(function(){var x,d,i,v,st;x=open();d=x.document;d.open();function $(){return window.document.getElementsByTagName(%27img%27);}function h(s){s=s.replace(/&/g,%22&amp;%22);return s;}d.write(%22<style></style><p>%22);var i=0;var L=$().length;for(i;i<L;i++){d.write(h($()[i].src)+%22 alt=%22 +h($()[i].alt)+%22;: %22);}d.write(%22</p>%22);d.close();})();";

    var choiceCSS = "<select id='cssSelect' onchange='changeCSSTheme()'>"+$('cssSelect').innerHTML+"</select>";
    
    var choice = "<h1>Menu</h1>\n\
    <form  action='' onsubmit='loadImages(\"pathImages\")'>\n\
    <p>"+inputPathImages+"</p>\n\
    <p><input type='submit' value='Load Images' /></p>\n\
	"+choiceCSS+"</form>";
    
        choice += navigator.appName.toLowerCase()=='netscape'?"<p id='pRemoveTheme'><a href='#' onclick='removeTheme()'>Remove this theme from the list</a></p><p id='pRestoreOriginalCss'><a href='#' onclick='restoreOriginalCss()'>Restore original CSS</a></p><p id='pEditCss'><a id='editCSS' onclick='view(\"divEditThisCSS\")'>Edit this CSS</a></p>\n\
    <div id='divEditThisCSS' >\n\
                <textarea id='textareaEditThisCSS' cols='50' rows='10'></textarea>\n\
                <a href='#' onclick='editCSSAndSave()'>Try</a>\n\
                <a href='#' onclick='save(false,true)'>Save as a .css</a>\n\
                <a href='#' onclick='closeDiv(\"divEditThisCSS\")'>Close</a>\n\
            </div>":"";
    choice+= "<p class='bookmarklet'><a href='"+hrefer+"' >see image info</a></p>";

    var _replaceContext = false; // replace the system context menu?
    var _mouseOverContext = false; // is the mouse over the context menu?
    var _divContext = $('divContext'); // makes my life easier

    var ie=document.all;
    var nn6=document.getElementById&&!document.all;
    var isdrag=false;
    var x,y;
    var dobj;
    
    var widthHeightRatio=null;
    var stepResizing = 1;
    
    var imageNumber = 0;

    var savePath = null;
    
    function Place(url, alt)
    {
        var content = $('main').innerHTML;
        
        content += "<img originalwidth='' originalheight='' id='img"+imageNumber+"' class='dragme' src='"+url+"' alt='"+alt+"' />";
        content += "<div id='divimg"+imageNumber+"' class='dragme'>";
        content += "<p></p>";
        content += "</div>";
        $('main').innerHTML = content;
        $('img'+imageNumber).width = $('img'+imageNumber).width < widthMain?$('img'+imageNumber).width:widthMain;
        target = $('img'+imageNumber);
        $(target.id).setAttribute('originalwidth', target.width);
        $(target.id).setAttribute('originalheight', target.height);
        updateValues();
        imageNumber++;
    }
    
    function removeImage()
    {
        var nodeList = $('main').childNodes;
        var i = 0;
        var j = 0;
        var tarId = target.id;
        var divTarId = 'div'.concat(tarId);

        for(i; i <= nodeList.length; i++)
            {
                if(nodeList[i].id == tarId || nodeList[i].id == divTarId)
                {
                    $('main').removeChild(nodeList[i]);
                    j++;
                    i--;
                }
                if (j==2)
                    break;
            }
        CloseContext();
    }
        
    function addComment()
    {
        view('divComment');
        var textarea = $('divComment').getElementsByTagName("textarea")[0];        
        textarea.value = $('div'+target.id).getElementsByTagName("p")[0].innerHTML;
        
        textarea.focus();
    }
    
    function closeDiv(identity)
    {
        $(identity).style.display="none";
    }
    
    function closePaging()
    {
        closeDiv('paging');
        while(imageList.length > 0)
            imageList.shift();
        getChoice();
    }
    
    function getChoice()
    {
        updateChoice();
        $('right').innerHTML = choice;
        
        var found = false;
        for (var i=1; i<themeArray.length; i++){
            if (document.getElementsByTagName('link')[0].getAttribute('href').split('CSS/')[1] == themeArray[i]) {
                found=true;
                break;
            }
        }
        if(navigator.appName.toLowerCase()=='netscape'){
        if (!found ){
            $('pRestoreOriginalCss').style.display="block";
            $('pEditCss').style.display='block';
            if(document.getElementsByTagName('link')[0].getAttribute('href') != '')
                $('pRemoveTheme').style.display = "block";
            else
                $('pRemoveTheme').style.display = "none";
        }
        else{
            $('pRestoreOriginalCss').style.display="none";
            $('pEditCss').style.display='none';
            $('divEditThisCSS').style.display='none';
            $('pRemoveTheme').style.display = "none";
        }
        $('textareaEditThisCSS').value = document.getElementsByTagName('style')[0].innerHTML;
        }
    }
    
    function updateChoice()
    {
        choiceCSS = "<select id='cssSelect' onchange='changeCSSTheme()'>"+$('cssSelect').innerHTML+"</select>";
        choice = "<h1>Menu</h1>\n\
    <form  action='' onsubmit='loadImages(\"pathImages\")'>\n\
    <p>"+inputPathImages+"</p>\n\
    <p><input type='submit' value='Load Images' /></p>\n\
    "+choiceCSS+"</form>";
    
        choice += navigator.appName.toLowerCase()=='netscape'?"<p id='pRemoveTheme'><a href='#' onclick='removeTheme()'>Remove this theme from the list</a></p><p id='pRestoreOriginalCss'><a href='#' onclick='restoreOriginalCss()'>Restore original CSS</a></p><p id='pEditCss'><a id='editCSS' onclick='view(\"divEditThisCSS\")'>Edit this CSS</a></p>\n\
    <div id='divEditThisCSS' >\n\
                <textarea id='textareaEditThisCSS' cols='50' rows='10'></textarea>\n\
                <a href='#' onclick='editCSSAndSave()'>Try</a>\n\
                <a href='#' onclick='save(false,true)'>Save as a .css</a>\n\
                <a href='#' onclick='closeDiv(\"divEditThisCSS\")'>Close</a>\n\
            </div>":"";
    choice+= "<p class='bookmarklet'><a href='"+hrefer+"' >see image info</a></p>";
    }
    
    function textColour(colour)
    {
        $('div'+target.id).getElementsByTagName('p')[0].style.color = colour;
    }
    
    function submitComment(event) {
        var par = $('div'+target.id).getElementsByTagName("p")[0];
        var message = $('divComment').getElementsByTagName("textarea")[0].value;
        var KeyID = event.keyCode;
       
        par.innerHTML = message;
    }
    

    function controlWidthHeightRatio()
    {
        if( $('checkboxResize').checked )
            widthHeightRatio = target.width/target.height;
    }
    
    function resize()
    {
        view('divResize');
        
        $('textWidth').innerHTML= "width: ";
        $('valueWidth').value= target.width;
        $('buttonsWidth').innerHTML="";
        $('buttonsWidth').innerHTML += target.width > 40 ?"<input type='button' value='-' onclick='resizer(\"rw\",\"valueWidth\")' />":"";
        $('buttonsWidth').innerHTML += target.width + stepResizing < widthMain ? "<input type='button' value='+' onclick='resizer(\"ew\",\"valueWidth\")' />" : "";
        
        $('textHeight').innerHTML= "height: ";
        $('valueHeight').value= target.height;
        $('buttonsHeight').innerHTML = "";
        $('buttonsHeight').innerHTML += target.height > 40 ? "<input type='button' value='-' onclick='resizer(\"rh\",\"valueHeight\")' />" : "" ;
        $('buttonsHeight').innerHTML += target.height + stepResizing < window.screen.height ? "<input type='button' value='+' onclick='resizer(\"eh\",\"valueHeight\")' />" : "";
    }
    
    function resizer(action,id)
    {
        if(action.split('w').length > 1)
            resizeWidth(action,id);
        else resizeHeight(action,id);
    }
    
    function resizeWidth(action,id)
    {
        if (action=='iw') {
            if($(id).value > 40 && $(id).value < widthMain )
                target.width = $(id).value;
        }
        else if(action=='rw')
            target.width -= stepResizing;
        else
            target.width += stepResizing;
        
        target.height = $('checkboxResize').checked ? target.width/widthHeightRatio : target.height;
        updateValues();
        $('buttonsWidth').innerHTML="";
        $('buttonsWidth').innerHTML += target.width > 40 ?"<input type='button' value='-' onclick='resizer(\"rw\",\"valueWidth\")' />":"";
        $('buttonsWidth').innerHTML += target.width + stepResizing < widthMain ? "<input type='button' value='+' onclick='resizer(\"ew\",\"valueWidth\")' />" : "";
        
    }
    
    function resizeHeight(action,id)
    {
        
        if (action=='ih') {
           if($(id).value > 0)
                target.height = !$('checkboxResize').checked ? $(id).value:($(id).value * widthHeightRatio<widthMain ? $(id).value : target.height) ;
        }
        else if(action=='rh')
            target.height -= stepResizing;
        else target.height += stepResizing;
        
        target.width = $('checkboxResize').checked ? target.height * widthHeightRatio : target.width;
        updateValues();
        $('buttonsHeight').innerHTML = "";
        $('buttonsHeight').innerHTML += target.height > 40 ? "<input type='button' value='-' onclick='resizer(\"rh\",\"valueHeight\")' />" : "" ;
        $('buttonsHeight').innerHTML += target.height + stepResizing < window.screen.height ? "<input type='button' value='+' onclick='resizer(\"eh\",\"valueHeight\")' />  " : "";
    }
    
    function originalSize()
    {
        target.width = $(target.id).getAttribute('originalwidth');
        target.height = $(target.id).getAttribute('originalheight');
        updateValues();
    }
    
    function updateValues()
    {
        $('valueWidth').value= target.width;
        $('valueHeight').value= target.height;
        
        $('urlImage').innerHTML = target.src;
        $('altImage').innerHTML = target.alt;
        $('widthImage').value = target.width;
        $('heightImage').value = target.height;
        $('borderImage').value = target.style.border;
        $('topImage').value = target.style.top;
        $('leftImage').value = target.style.left;        
    }
    
    function changeCSSTheme()
    {
        var fillTextareaCss = false;
        if($('cssSelect').value.split('.').length < 2){
            document.getElementsByTagName('link')[0].setAttribute('href',"" );
            fillTextareaCss = true;
        }
        else
            document.getElementsByTagName('link')[0].setAttribute('href',"CSS/"+$('cssSelect').value );
        getChoice();
        if(fillTextareaCss) $('textareaEditThisCSS').value = document.getElementsByTagName('style')[0].innerHTML;
    }
    
    function view(identity)
    {
        $(identity).style.display = "block";
    }
    
    function changeBorderImage(id)
    {
        target.style.border = $(id).value;
    }
    
    function changeTopImage(id)
    {
        target.style.top = $(id).value;
    }
    
    function changeLeftImage(id)
    {
        target.style.left = $(id).value;
    }
    
    function initTarget()
    {
        widthHeightRatio = target.width/target.height;
        updateValues();
    }
    
    function editCSSAndSave()
    {
        /*try{
            var nodeList = document.getElementsByTagName('head')[0].childNodes;
                    for(var i=0; i<nodeList.length; i++){
                        if(nodeList[i].nodeName.toLowerCase() == 'style'){
                            nodeList[i].nodeValue = "haha";
                            break;
                        }
                    }
            
        }catch(e){
            alert(e);
        }
        
        /var node = document.getElementsByTagName('style')[0];
        for (var i=node.childNodes.length-1; i>=0; i--) {
            node.removeChild( node.childNodes[i] );
        }
        // If I have anything left
        if (node.innerHTML != "") {
            node.innerHTML = "";
        }*/
		if(navigator.appName.toLowerCase()!="netscape"){
                    alert('This function is not yet supported due to browserincompatibility\nInstead, try to save the CSS as a CSS stylesheet');
                    return;
                }
                
                try{
                    var nodeList = document.getElementsByTagName('head')[0].childNodes;
                    for(var i=0; i<nodeList.length; i++){
                        if(nodeList[i].nodeName.toLowerCase() == 'style'){
                            document.getElementsByTagName('head')[0].removeChild(nodeList[i]);
                            var st = document.createElement('style');
                            st.setAttribute('type', 'text/css');
                            st.innerHTML = $('textareaEditThisCSS').value;
                    
                    document.getElementsByTagName('head')[0].replaceChild(st, nodeList[i]);
                    break;
                        }
                    }     
        }catch(e){alert(e);}
		
		save(true, false);
		
                window.location.reload();
    }
    
    function adjustCSSSelect(newOption)
    {
        $('cssSelect').innerHTML += "<option value='"+newOption+".css'>"+newOption+"</option>";
    }
    
    function restoreOriginalCss()
    {
        document.getElementsByTagName('style')[0].innerHTML = originalCSS;
        document.getElementsByTagName('link')[0].setAttribute('href','');
        getChoice();
        save(true, false);
        window.location.reload();
    }
    
    function removeTheme()
    {
        var nodeList = $('cssSelect').childNodes;
        var i = 0;
        for(i; i <= nodeList.length; i++)
        {
                try{
                    if(nodeList[i].value == document.getElementsByTagName('link')[0].getAttribute('href').split('CSS/')[1])
                    {
                        $('cssSelect').removeChild(nodeList[i]);
                        break;
                    }
                }
                catch(e){
                    alert("You've just removed this theme from the list");
                }
        }
        restoreOriginalCss();
    }
	
	function convertUrlToGoodUrl(url)
	{
		var toReplace = url.substring(url.length-3, url.length);
		url = url.replace(toReplace,toReplace.toLowerCase());
		return url;
	}
    
//////////////////////////////
///////////image.js///////////
/////////////////////////////
    function Image(url,name, alt){
        this.url = url;
        this.name = name;
        this.alt = alt
        this.x = 0;
        this.y = 0;
        this.visible = true;
    }


    function setContent(c){
        //'+' of '-'
        //previous en next hidden of niet
        switch (c){
            case '+': ;
                break;
            case '-': index -= 2*numberImages;
                break;
        }
        
        var limit = imageList.length >= index+numberImages ? index+numberImages:imageList.length;
        
        var div = document.getElementById("right");
        div.innerHTML = "";
        while(index < imageList.length && index < limit) {
            div.innerHTML += createEntry(imageList[index]);
            index++;
        }
        
        if(index-numberImages <= 0)
            document.getElementById("previous").style.display = "none";
        else document.getElementById("previous").style.display = "block";
        
        if (index==imageList.length)
            document.getElementById("next").style.display = "none";
        else document.getElementById("next").style.display = "block";
        div.innerHTML += document.getElementById("paging").innerHTML;
    }

    function loadImages(id){
    index = 0;
    rootDir = document.getElementById(id).value;
    
    if(rootDir.split('http').length > 1)
        loadImagesFromURL(rootDir);
    
    else{
        var entries = null;
        if(navigator.appName == "Microsoft Internet Explorer") {
            try {
                var fso = new ActiveXObject("Scripting.FileSystemObject");
                } catch(ex) {
                    alert("Foutje");
            }
	
            var folder = fso.GetFolder(rootDir);
            entries = new Enumerator(folder.files);
            for (; !entries.atEnd(); entries.moveNext()) {
                entry = fso.GetFile(entries.item());
                if(entry.path.toLowerCase().split(".jpeg").length > 1 || entry.path.toLowerCase().split(".jpg").length > 1 || entry.path.toLowerCase().split(".png").length > 1 || entry.path.toLowerCase().split(".gif").length > 1 || entry.path.toLowerCase().split(".bmp").length > 1 || entry.path.toLowerCase().split(".psd").length > 1 || entry.path.toLowerCase().split(".psp").length > 1 || entry.path.toLowerCase().split(".tif").length > 1 ) {       
                    var img = new Image(entry.Path, entry.Name, entry.Name);
                    imageList.push(img);
                }
            }

        }//end if
        else {
            try {
                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
                } catch (e) {
                	alert("Permission to save file was denied.");
                }
                var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
            try{
                file.initWithPath(rootDir);
            }
            catch (e){
                alert("There's a possibility you entered a wrong path\nThe path you entered was: " + rootDir);
            }
        // file is the given directory (nsIFile)
            entries = file.directoryEntries;
    
            while(entries.hasMoreElements() ) {
                var entry = entries.getNext();
                entry.QueryInterface(Components.interfaces.nsIFile);
            
                if(entry.path.toLowerCase().split(".jpeg").length > 1 || entry.path.toLowerCase().split(".jpg").length > 1 || entry.path.toLowerCase().split(".png").length > 1 || entry.path.toLowerCase().split(".gif").length > 1 || entry.path.toLowerCase().split(".bmp").length > 1 || entry.path.toLowerCase().split(".psd").length > 1 || entry.path.toLowerCase().split(".psp").length > 1 || entry.path.toLowerCase().split(".tif").length > 1 ) {
                    var img = new Image(entry.path,entry.leafName, entry.leafName);
                    //list = list+createEntry(img);            
                    imageList.push(img);
                }
            }
        }//end else
    setContent('+');
    }//end else if loadurl
}//end function loadimages
    
    function createEntry(entry){
        var url = convertUrlToGoodUrl(entry.url);
        var alt = entry.alt;
        
		var newUrl = "";
        var array = url.split("\\");
		
        //IE
        /*if(navigator.appName.split("Internet Expl").length>1) {
            for(var j=0; j < array.length-1; j++)
                newUrl += array[j]+"/";
		newUrl += array[j];
            return "<span class=\"image\"><img src='"+url+"' alt='"+alt+"' height=\"140\" onclick='Place(\""+url+"\",\""+entry.alt+"\")' /></span>";
        }
        //FF
        else {*/
            var u = url.split('http:').length == 1 ? "file://"+url.replace(/\\/g,'\/') : url;

			return "<span class=\"image\"><img src='"+u+"' alt='"+alt+"' height=\"140\" onclick='Place(\""+u+"\",\""+entry.alt+"\")' /></span>";
		
		//}
	}

    function setVisibleHidden(id)
    {
        var el = document.getElementById("id");
        el.className = (el.className=='hidden'?'visible':'hidden');
    }
        
    function loadImagesFromURL(url)
    {
	
        var img = null;
        if(url.split("http://").length==1){
            if(url.toLowerCase().split(".jpeg").length > 1 || url.toLowerCase().split(".jpg").length > 1 || url.toLowerCase().split(".png").length > 1 || url.toLowerCase().split(".gif").length > 1 || url.toLowerCase().split(".bmp").length > 1 || url.toLowerCase().split(".psd").length > 1 || url.toLowerCase().split(".psp").length > 1 || url.toLowerCase().split(".tif").length > 1 ) {       
                url = convertUrlToGoodUrl(url);
				img = new Image(url, "", "");
                imageList.push(img);
            }
        }
        else {
            var arr = url.split(";:");
			
            for(var i=0;i<arr.length-1;i++) {
		
		arr[i] = arr[i].replace("\t","");
		arr[i] = arr[i].replace("\n","");
                img = new Image(convertUrlToGoodUrl(arr[i].split("alt=")[0]), arr[i].split("alt=")[1], arr[i].split("alt=")[1]);
                imageList.push(img);
            }
        }
        
        setContent('+');
        
    }
        
    function addImage()
    {
        $('pagingUl').innerHTML += "<li><form action='' onsubmit='loadImages(\"pathImages\")'>"+inputPathImages+"</form></li>";
    }
    
////////////////////////////////////////////////////////////////
//////http://luke.breuer.com/tutorial/js_contextmenu.htm///////
//////////////////////////////////////////////////////////////

function InitContext()
{ 
    _divContext.onmouseover = function() { _mouseOverContext = true; };
    _divContext.onmouseout = function() { _mouseOverContext = false; };
    ////////////PROBLEEM!!!
    //document.getElementsByTagName('style')[0].innerHTML = originalCSS;
    getChoice();
    if(navigator.appName.toLowerCase()=='netscape')$('textareaEditThisCSS').value = document.getElementsByTagName('style')[0].innerHTML;
    
    $("main").onmousedown = ContextMouseDown;
    $("main").onmouseup = ContextShow;
    
    $('right').style.width = widthRight + "px";
    $('main').style.width = widthMain + "px";
                var arrColours = $('divCommentColours').getElementsByTagName('td');
                for (var k=0;k<arrColours.length;k++) {
                    arrColours[k].style.background = arrColours[k].id;
                }
} 


// call from the onMouseDown event, passing the event if standards compliant
function ContextMouseDown(event) {
    if (_mouseOverContext) {
        return;
    }
    // IE is evil and doesn't pass the event object
    if (event == null) event = window.event;
    // we assume we have a standards compliant browser, but check if we have IE
    target = event.target != null ? event.target : event.srcElement;
    // only show the context menu if the right mouse button is pressed
    // and a hyperlink has been clicked (the code can be made more selective)
    if (target.tagName.toLowerCase() == 'img'){
        _replaceContext = true;
        initTarget();
    }
    else if (!_mouseOverContext)
        _divContext.style.display = 'none';
}

function CloseContext()
{
    _mouseOverContext = false;
    _divContext.style.display = 'none';
    closeDiv('divResize');
    closeDiv('divComment');
    closeDiv('divProperties');
}

// call from the onContextMenu event, passing the event
// if this function returns false, the browser's context menu will not show up
function ContextShow(event)
{
    if (_mouseOverContext)
        return;
    // IE is evil and doesn't pass the event object
    if (event == null) event = window.event;
    // we assume we have a standards compliant browser, but check if we have IE
    target = event.target != null ? event.target : event.srcElement;
    
    if (_replaceContext) {
        //$('delete').onclick = removeImage(target);
        //$('cancel').href = 'http://luke.breuer.com/webmark/?addurl=' + encodeURIComponent(target.title) + '&title=' + encodeURIComponent(target.innerHTML);
        // document.body.scrollTop does not work in IE
        var scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;
        var scrollLeft = document.body.scrollLeft ? document.body.scrollLeft : document.documentElement.scrollLeft;
        // hide the menu first to avoid an "up-then-over" visual effect
        _divContext.style.display = 'none';
        _divContext.style.left = event.clientX + scrollLeft + 'px';
        _divContext.style.top = event.clientY + scrollTop + 'px';
        _divContext.style.display = 'block';
        _replaceContext = false;
        return false; 
    } 
}

// comes from prototype.js; this is simply easier on the eyes and fingers
function $(id)
{ 
    return document.getElementById(id); 
}


////////////////////////////////////////////////////////
/////http://elouai.com/javascript-drag-and-drop.php////
//////////////////////////////////////////////////////

function movemouse(e)
{
  if (isdrag)
  {
    dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
    dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
    return false;
  }
}

function selectmouse(e) 
{
  var fobj       = nn6 ? e.target : event.srcElement;
  var topelement = nn6 ? "HTML" : "BODY";

  while (fobj.tagName != topelement && fobj.className != "dragme")
  {
    fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  }

  if (fobj.className=="dragme")
  {
    isdrag = true;
    dobj = fobj;
    tx = parseInt(dobj.style.left+0);
    ty = parseInt(dobj.style.top+0);
    x = nn6 ? e.clientX : event.clientX;
    y = nn6 ? e.clientY : event.clientY;
    document.onmousemove=movemouse;
    return false;
  }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("if(isdrag){updateValues();}isdrag=false;");

/////////////////////////////
//////////tiddlywiki///////////
//////////////////////////////

function save(overwrite, css)
{
	var t0 = new Date();
	var originalPath = document.location.toString();
	
	var localPath = getLocalPath(originalPath);
	
	saveMain(localPath, overwrite, css);
	//alert("saveChanges " + (new Date()-t0) + " ms");
}

function saveMain(localPath, overwrite, css)
{
    var content = css ? $('textareaEditThisCSS').value :"<html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>";
        
        var save;
	try {
		save = saveFile(localPath,content,overwrite,css);
	} catch (ex) {
		alert(ex);
	}
	if(save) {
		if(!overwrite)
                    alert("Saved to: " + savePath);
                savePath = null;
	} else {
		alert("Failed to save file");
	}
}

function saveFile(fileUrl, content, overwrite, css)
{
    savePath = "";
    if(!css)
        savePath = !overwrite ? fileUrl.split('.html')[0]+new Date().getTime()+".html" : fileUrl;
    else{
        var tmpPath = fileUrl.split('/');
        for(var i=0;i<tmpPath.length-1;i++)
            savePath += tmpPath[i]+"/";
        var t = new Date().getTime();
        savePath += "CSS/MyCss"+t+".css"
        adjustCSSSelect("MyCss"+t);
    }
    
    var r = mozillaSaveFile(savePath, content);
    if(!r)
	r = ieSaveFile(savePath, content);
	if(!r)
            r = javaSaveFile(savePath, content);
    return r;
}

function mozillaSaveFile(savePath, content)
{
        if(window.Components) {
		try {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
			var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
			file.initWithPath(savePath);
			if(!file.exists())
				file.create(0,0664);
			var out = Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
			out.init(file,0x20|0x02,00004,null);
			out.write(content,content.length);
			out.flush();
			out.close();
			return true;
		} catch(ex) {
			return false;
		}
	}
	return null;
}

// Returns null if it can't do it, false if there's an error, true if it saved OK
function ieSaveFile(filePath,content)
{
	alert(filePath);
	ieCreatePath(filePath);
	try {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
	} catch(ex) {
		return null;
	}
	var file = fso.OpenTextFile(filePath,2,-1,0);
	file.Write(content);
	file.Close();
	return true;
}

function getLocalPath(origPath)
{
	var originalPath = convertUriToUTF8(origPath,"UTF-8");
	// Remove any location or query part of the URL
	var argPos = originalPath.indexOf("?");
	if(argPos != -1)
		originalPath = originalPath.substr(0,argPos);
	var hashPos = originalPath.indexOf("#");
	if(hashPos != -1)
		originalPath = originalPath.substr(0,hashPos);
	// Convert file://localhost/ to file:///
	if(originalPath.indexOf("file://localhost/") == 0)
		originalPath = "file://" + originalPath.substr(16);
	// Convert to a native file format
	var localPath;
	if(originalPath.charAt(9) == ":") // pc local file
		localPath = unescape(originalPath.substr(8)).replace(new RegExp("/","g"),"\\");
	else if(originalPath.indexOf("file://///") == 0) // FireFox pc network file
		localPath = "\\\\" + unescape(originalPath.substr(10)).replace(new RegExp("/","g"),"\\");
	else if(originalPath.indexOf("file:///") == 0) // mac/unix local file
		localPath = unescape(originalPath.substr(7));
	else if(originalPath.indexOf("file:/") == 0) // mac/unix local file
		localPath = unescape(originalPath.substr(5));
	else // pc network file
		localPath = "\\\\" + unescape(originalPath.substr(7)).replace(new RegExp("/","g"),"\\");
	return localPath;
}

function convertUriToUTF8(uri,charSet)
{
	if(window.netscape == undefined || charSet == undefined || charSet == "")
		return uri;
	try {
		netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
		netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
                var converter = Components.classes["@mozilla.org/intl/utf8converterservice;1"].getService(Components.interfaces.nsIUTF8ConverterService);
	} catch(ex) {
		return uri;
	}
	return converter.convertURISpecToUTF8(uri,charSet);
}

function ieCreatePath(path)
{
	try {
		var fso = new ActiveXObject("Scripting.FileSystemObject");
	} catch(ex) {
		return null;
	}

	var pos = path.lastIndexOf("\\");
	if(pos!=-1)
		path = path.substring(0,pos+1);

	var scan = [path];
	var parent = fso.GetParentFolderName(path);
	while(parent && !fso.FolderExists(parent)) {
		scan.push(parent);
		parent = fso.GetParentFolderName(parent);
	}

	for(i=scan.length-1;i>=0;i--) {
		if(!fso.FolderExists(scan[i])) {
			fso.CreateFolder(scan[i]);
		}
	}
	return true;
}

function getContent(URL)
{
    try
        {
            netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
            var ioService = Components.classes["@mozilla.org/network/io-service;1"].getService(Components.interfaces.nsIIOService);
            
            var source = ioService.newURI(URL, "utf-8", null);
            var channel = ioService.newChannelFromURI(source);
            var inputStream =  channel.open();
            var sis = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
            sis.init(inputStream);
            var data = "";
            var str = sis.read(-1);
            
            while (str.length > 0)
            {
                data += str;
                str = sis.read(-1);        
            }
            sis.close();
            inputStream.close();
            
            var utf8Converter = Components.classes["@mozilla.org/intl/utf8converterservice;1"].getService(Components.interfaces.nsIUTF8ConverterService);
            data = utf8Converter.convertURISpecToUTF8 (data, "UTF-8");
            return data;
        }
        catch(e)
        {
            alert(e)
        }
}
</script>
  </body></html>